<template>
  <div class="home">
    <form class="searchform cf">
      <span class="search_type"
        ><select v-model="searchType" class="search_option" name="" id="">
          <option value="0">百度</option>
          <option value="1">稀土掘金</option>
          <option value="2">CSDN</option>
          <option value="3">Bing</option>
          <option value="4">文心一言</option>
        </select></span
      >
      <input
        v-model="searchText"
        type="text"
        placeholder="Is it me you’re looking for?"
        ref="searchInput"
      />
      <button @click.prevent="getSearch">Search</button>
    </form>
    <!-- 中间部分 -->
    <div class="center_box">
      <ul class="card_list">
        <li v-for="item in usuallList" :key="item.web" class="card" @click="getLink(item)">
          <img
            src="https://images.unsplash.com/photo-1583132648336-a4f3a079a526?w=320"
          />
          <span class="card_text text-shadow">{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import anime from "animejs/lib/anime.es.js";
import Anime from "animejs";

const searchText = ref("");
const searchType = ref("0");
const searchInput = ref(null);

// 常用工具列表
const usuallList = ref([
  { web: "https://www.jxrljt.com/dist_oa/#/login", name: "人才集团办公系统" },
  {
    web: "http://106.225.192.83:9617/agilebpm-ui/login.html",
    name: "人才集团办公管理系统",
  },
  {
    web: "https://www.jxrljt.com/zhrc_oa_mobile/#/login",
    name: "人才办公移动端",
  },
  {
    web: "https://element-plus.sxtxhy.com/zh-CN/guide/design.html",
    name: "Eelement Plus 文档",
  },
  {
    web: "https://element.faas.ele.me/#/zh-CN/component/cascader",
    name: "Eelement ui 文档",
  },
  { web: "https://www.npmjs.com/", name: "npm仓库" },
  { web: "https://www.iconfont.cn/", name: "阿里巴巴图标库" },
  { web: "https://vant-ui.github.io/vant/#/zh-CN/home", name: "Vant4 组件库" },
  { web: "https://www.wenshushu.cn/", name: "文叔叔传文件" },
  { web: "https://cn.vitejs.dev/", name: "vite 开发文档" },
  { web: "https://gitee.com/", name: "gitee代码仓库" },
  { web: "https://fanyi.baidu.com/", name: "百度翻译" },
]);


const getLink = (item)=>{
    window.open(item.web,"_blank")
}

onMounted(() => {
  searchInput.value.focus();

  if (localStorage.getItem("searchType"))
    searchType.value = localStorage.getItem("searchType");

  let lis = document.querySelectorAll(".card");
  lis.forEach((item, index) => {
    Anime({
      targets: item,
      translateX: -1400,
      backgroundColor: "#FFF",
      duration: 1200,
    });
  });
});

watch(searchType, () => {
  localStorage.setItem("searchType", searchType.value);
});

const getSearch = () => {
  switch (searchType.value) {
    case "0":
      window.open("https://www.baidu.com/s?wd=" + searchText.value);
      break;
    case "1":
      window.open("https://www.juejin.cn/search?query=" + searchText.value);
      break;
    case "2":
      window.open("https://so.csdn.net/so/search?q=" + searchText.value);
      break;
    case "3":
      window.open("https://www.bing.com/search?q=" + searchText.value);
      break;
    case "4":
      window.open("https://yiyan.baidu.com/?q=" + searchText.value);
      break;
    default:
      break;
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  background-color: #fff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  overflow: hidden;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}

.searchform {
  padding: 0.125rem 0.3125rem;
  margin: 1.25rem auto;
  width: 31.25rem;
  height: 2.5rem;
  box-shadow: 0 0.25rem 0.5625rem rgba(0, 0, 0, 0.37);
  border-radius: 0.625rem;
  display: flex;
  align-content: center;
}
select {
  appearance: none;
  text-align: center;
  color: #333;
}
.search_type {
  position: absolute;
}
.not-arrow::-ms-expand {
  display: none;
}
.search_option {
  border: none;
  outline: none;
  height: 2.3rem;
}

.searchform input,
.searchform button {
  float: left;
}
.searchform input {
  background: #fefefe;
  border: none;
  font: 0.75rem/0.75rem "HelveticaNeue", Helvetica, Arial, sans-serif;
  margin-right: 0.3125rem;
  padding: 0.75rem 0.625rem 0.625rem 3.8rem;
  width: 23.5625rem;
}
.searchform input:focus {
  outline: none;
}
.searchform button {
  background: rgb(52, 173, 236);
  background: -moz-linear-gradient(
    top,
    rgba(52, 173, 236, 1) 0%,
    rgba(38, 145, 220, 1) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(52, 173, 236, 1)),
    color-stop(100%, rgba(38, 145, 220, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(52, 173, 236, 1) 0%,
    rgba(38, 145, 220, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(52, 173, 236, 1) 0%,
    rgba(38, 145, 220, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(52, 173, 236, 1) 0%,
    rgba(38, 145, 220, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(52, 173, 236, 1) 0%,
    rgba(38, 145, 220, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
  border: none;
  color: #fff;
  cursor: pointer;
  font: 0.8125rem/0.8125rem "HelveticaNeue", Helvetica, Arial, sans-serif;
  padding: 0.625rem;
  width: 6.625rem;
  box-shadow: 0 0 0.125rem #2692dd inset;
  -moz-box-shadow: 0 0 0.125rem #2692dd inset;
  -webkit-box-shadow: 0 0 0.125rem #2692dd inset;
  border-radius: 0.5625rem;
  -moz-border-radius: 0.5625rem;
  -webkit-border-radius: 0.5625rem;
}
.searchform button:hover {
  opacity: 0.9;
}

.center_box {
  height: 37.5rem;
  width: 98.75rem;
  transform: translateX(1400px);
  .card_list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: self-start;
    align-content: start;
    .card {
      width: 320px;
      height: 120px;
      border-radius: 10px;
      overflow: hidden;
      margin: 15px 20px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.15);
      transform: scale3d(1, 1, 1);
      transition: all 0.2s ease-out, filter 0.75s ease-out;
      background: rgba(0, 0, 0, 0.2);
      //   filter: grayscale(0.1) saturate(95%) brightness(95%) contrast(90%);
      text-align: center;
    }
    .card:hover {
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 0, 0, 0.3);
      filter: grayscale(0) saturate(105%) brightness(100%) contrast(100%);
      cursor: url("")
          16 16,
        auto;
    }

    .card > img {
      position: absolute;
      width: 108%;
      height: 108%;
      top: -4%;
      left: -4%;
      z-index: -10;
      transform: scale(1.05);
      transition: all 0.2s ease-out, transform 0.2s ease-out,
        filter 0.75s ease-out;
      filter: blur(0px);
    }

    .card.blur > img {
      filter: blur(1px) grayscale(0.1) saturate(95%);
    }

    .card_text {
      color: white;
      font-size: 1.5rem;
      filter: none;
      line-height: 7.5rem;
      font-weight: 600;
    }
    .text-shadow {
      text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04),
        3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04),
        0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04),
        7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04),
        9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04),
        11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04),
        13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04),
        0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04),
        17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04),
        19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
    }

    .card > .shineLayer {
      height: 100%;
      width: 100%;
      background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 80%
      );
      transition: all 0.2s ease-out;
    }
  }
}
</style>
